<template>
<div v-if="JSON.stringify(data)!='{}'">
    <!-- <div id="test" style="width: 200px;height: 100px;">

    </div> -->
    <!--双十二进入时弹框
    <div style="background:#CF326D;position:relative;">
            <van-popup  v-model="show" position="bottom" show-cancel-button
                    style="position:fixed;top: 100px;height: 400px;overflow: hidden;border-radius: 2vw;width: 300px;background:rgba(255,255,255,0);" align="center">
                    <a :href="alertRespon.url" style="background:rgba(255,255,255,0)">
                        <img :src="alertRespon.image" alt="">
                    </a>
                <p style="width: 25px;">
                    <img src="../assets/twelve/X.png" alt=""  @click="close">
                </p>
            </van-popup>
        </div>-->
        <div class="main-search-wrap" :style="'background:'+data.color">
            <div class="main-search">
                <input type="text" placeholder="请输入你要搜索的内容" style="height: 32px;background:#f5f5f5" @focus="toSearch"/>
                <!-- <img src="@/assets/img/kefu@2x.png" alt="消息" @click="toCustom"/> -->
            </div>
        </div>
        <pull-to
        :bottom-load-method="infiniteHandler"
        :bottom-config="BOTTOM_DEFAULT_CONFIG" class="main-wrap" style="height: 84.4vh">

        <index-top :banner="data.banner" class="topBanner"></index-top>
        <div :style="'background:'+data.color+';padding: 20px 0;'">
            <today-users :list="data.today"></today-users>
            <div class="main-features-wrap" >
                <div class="main-features">
                    <ul>
                        <li v-for="(item,index) in data.nav" :key="index" v-if="index<10">

                            <a :href="item.link" v-if="item.link">
                                <img :src="item.image" />
                                <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                            </a>
                            <div v-else>
                                <router-link to="/shopChart" v-if="item.poster_name=='购物车'">
                                    <img :src="item.image" />
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </router-link>
                                <router-link to="/myOrder?active=0" v-else-if="item.poster_name=='订单'">
                                    <img :src="item.image" />
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </router-link>
                                <router-link to="/club" v-else-if="item.poster_name=='社区'">
                                    <img :src="item.image" />
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </router-link>
                                <router-link to="/enjoy" v-else-if="item.poster_name=='收藏'">
                                    <img :src="item.image" />
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </router-link>
                                <a v-else-if="item.poster_name=='充值'" @click="toastTip">
                                    <img :src="item.image"/>
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </a>
                                <router-link to="/allGoods" v-else-if="item.poster_name=='全部商品'">
                                    <img :src="item.image" />
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </router-link>
                                <router-link to="/getGoodsByCid" v-else-if="item.poster_name=='分类'">
                                    <img :src="item.image" />
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </router-link>
                                <router-link to="/myCoupon" v-else-if="item.poster_name=='优惠券'">
                                    <img :src="item.image" />
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </router-link>

                                <a v-else @click="toastTip">
                                    <img :src="item.image" />
                                    <span :style="'color:'+data.font_color">{{item.poster_name}}</span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
        
        <a :href="data.group.info.link" style="margin-bottom: 20px;display:block"  v-if="data.group.info.type==6">
            <img :src="data.group.info.image" alt="">
        </a>
        <a style="margin-bottom: 20px;display:block"  v-else>
            <img :src="data.group.info.image" alt="">
        </a>
        <div class="xianshixianliang">
            <a :href="data.limit_time.info.link" v-if="data.limit_time.is_open == 1&&data.limit_time.info.type==6">
                <img :src="data.limit_time.info.image" alt="">
            </a>
            <a v-if="data.limit_time.is_open == 1&&data.limit_time.info.type!=6">
                <img :src="data.limit_time.info.image" alt="">
            </a>
            <a :href="data.limit_number.info.link" v-if="data.limit_number.is_open == 1&&data.limit_number.info.type==6">
                <img :src="data.limit_number.info.image" alt="">
            </a>
            <a :href="data.limit_number.info.link" v-if="data.limit_number.is_open == 1&&data.limit_number.info.type!=6">
                <img :src="data.limit_number.info.image" alt="">
            </a>
        </div>
        <div style="background:#f5f5f5">
            <div v-for="(item,index) in data.activity" :key="index" style="padding: 0 4vw">
                <div class="active1" v-if="item.type==1">
                    <a :href="item.url">
                       <img :src="item.image" alt="">
                    </a>
                    <ul>
                        <li v-for="(item1,index1) in item.list" :key="index1">
                            <router-link :to="'/detail?type=1&join_id=0&limit_id=0&group_id=0&goods_id='+item1.goods_id">
                                <div style="height: 29.44vw;overflow:hidden;line-height:33vw">
                                    <img :src="item1.image" alt="" style="line-height:33vw;display:inline-block;height: 100%">
                                </div>
                                <div style="font-size:13px" class="goodsMsg">
                                    <p style="color:#333333">{{item1.goods_name}}</p>
                                    <p style="color:#FF4C50">￥{{item1.sell_price}}</p>
                                </div>
                            </router-link>

                        </li>
                    </ul>

                </div>
                <div class="active2" v-if="item.type==2">

                    <router-link :to="'/allGoods?category_id='+item.relate_id+'&title='+item.name">
                        <img :src="item.image" alt="">
                    </router-link>

                    <ul>
                        <li v-for="(item1,index1) in item.list" :key="index1">
                            <router-link :to="'/detail?type=1&join_id=0&limit_id=0&group_id=0&goods_id='+item1.goods_id">
                                <div style="height: 29.44vw;overflow:hidden;line-height:33vw">
                                    <img :src="item1.image" alt="" style="line-height:33vw;display:inline-block;height: 100%">
                                </div>
                                <div style="font-size:13px" class="goodsMsg">
                                    <p style="color:#333333">{{item1.goods_name}}</p>
                                    <p style="color:#FF4C50">￥{{item1.sell_price}}</p>
                                </div>
                            </router-link>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jingxuan" >
            <van-tabs v-model="active" :sticky='true'>
                <van-tab :title="item.name" v-for="(item,index) in data.category" :key="index">
                    <ul class="guessList">
                        <li v-for="(item1,index1) in guessLick" :key="index1">
                            <router-link :to="'/detail?type=1&join_id=0&limit_id=0&group_id=0&goods_id='+item1.goods_id">
                                <div class="img">
                                    <img :src="item1.image" alt="">
                                </div>
                                <p class="guessListName">
                                    {{item1.goods_name}}
                                </p>
                                <p class="guessListPrice">
                                    <span>￥<span style="font-size: 17px">{{item1.sell_price}}</span></span>
                                    <span style="color:#F3891B;float:right;vertical-align:middle"><img src="@/assets/img/fire.png" alt="" style="width:12px;vertical-align:middle;margin-right: 3px"><span style="vertical-align:middle">{{item1.popularity}}</span></span>
                                </p>
                            </router-link>
                        </li>
                    </ul>
                </van-tab>
            </van-tabs>
        </div>
    </pull-to>
    <tabFooter :type="0" style="height: 7.8vh;position:fixed;bottom: 0px"></tabFooter>

</div>

</template>

<script>
    import tabFooter from "@/components/common/Footer";
    import PullTo from 'vue-pull-to';
    import indexTop from "@/components/index/topBanner.vue"
    import todayUsers from "@/components/index/todayUsers.vue"
    import request from "@/request/index.js"
    export default {
        name: "Index",
        components: {
            tabFooter,
            PullTo,
            indexTop,
            todayUsers
        },
        data() {
            return {
                data:{},
                guessLick:[],
                BOTTOM_DEFAULT_CONFIG: {
                    pullText: "上滑继续加载",
                    triggerText: "释放更新",
                    loadingText: "加载中,请稍后",
                    doneText: "内容已全部展示了",
                    failText: "加载失败",
                    loadedStayTime: 1000,
                    stayDistance: 50,
                    triggerDistance: 50,
                },
                guessNum:1,
                active: 0,
                page:1,
                category_id:'',
                allPage:1,
                show:0,
                show1:1,
                list1:[],
                alertRespon:[]
            }
        },
        watch:{
            active(newVal,oldVal){
                this.guessLick=[];
                this.category_id=this.data.category[newVal].category_id;
                request.getGoodsByCid(this);

            }
        },
        methods:{
            close(){
              this.show = 0;
              this.page++;
              console.log(this.page)
            },
            toastTip(){
                this.$toast('该功能暂未开放')
            },
            toCustom(){
                document.getElementById('YSF-BTN-HOLDER').onclick();
            },
            infiniteHandler:function(loaded){
                this.page++;
                request.getGoodsByCid(this);
                if(this.page<this.allPage){
                    this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                    loaded("done");
                    request.getGoodsByCid(this);
                }else{
                    this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
                    loaded("done");
                    this.loaded = true;
                }
            },
            toSearch(){
                this.$router.push({
                    path: '/search'
                });
            },
            // jianbian(a){
            //     if(a==3){
            //         a==2
            //     }
            //     if(a==0){
            //         document.getElementById('test').style.background='radial-gradient(red, green, blue)'
            //     }else if(a==1){
            //         document.getElementById('test').style.background='radial-gradient(blue,red, green)'
            //     }else{
            //         document.getElementById('test').style.background='radial-gradient(green,blue,red)'
            //     }

            // }
        },
        mounted() {
            request.getAlertImg(this);
            request.getShopIndex(this);
            if(this.$route.query.unionid){
                localStorage.setItem('unionid',this.$route.query.unionid);
            };
            // $(document).ready(function(){
            //     console.log($('.vue-pull-to-wrapper'))
            //     $('.vue-pull-to-wrapper').scroll(function() {
            //         var top = 150; //获取指定位置
            //         var scrollTop = $('.vue-pull-to-wrapper').scrollTop();  //获取当前滑动位置
            //         if(scrollTop < top){                 //滑动到该位置时执行代码
            //         $(".main-search-wrap").css('opacity',0.2+scrollTop/top);
            //         }else{
            //         $(".main-search-wrap").css('opacity',1);
            //         }
            //     });
            // });
            // let a=0;
            // setInterval(()=>{
            //     if(a>=3){
            //         a=0;
            //     }
            //     this.jianbian(a);
            //     a++;

            // },2000)

        },
    }
</script>

<style scoped lang="scss">
  .pageIndex{
    width: 60vw;
  }
.main-search-wrap{
    height: 7.8vh;
    overflow: hidden;
}
.active1{
    overflow: hidden;
    margin-top: 20px;
    ul{
        display: flex;
        justify-content: space-between;
        background:#f5f5f5;
        padding: 0 4vw;
    }
    li{
        width: 32%;
        background:#ffffff;
        border-radius: 5px;
        overflow: hidden;
        .goodsMsg{
            p{
                margin-left:13px;
                overflow: hidden;
                text-overflow : ellipsis;
                white-space: nowrap;

            }
        }
    }
    // ul{
    //     padding: 0 4vw;
    //     width: 864px;
    //     display: flex;
    //     justify-content: space-between;
    //     box-sizing: content-box;

    //     li{
    //         width: 280px;
    //         height: 120px;
    //         overflow: hidden;
    //         background: #ffffff;
    //         border-radius: 8px;
    //         padding: 10px;
    //         .goodsPic{
    //             width: 100px;
    //         }
    //         .goodsMsg{
    //             display: inline-block;
    //             margin-left: 10px;
    //             width: 140px;
    //             vertical-align: top;
    //             font-size: 12px;
    //             color:#333333;
    //             p:first-child{
    //                 text-overflow: -o-ellipsis-lastline;
    //                 overflow: hidden;
    //                 text-overflow: ellipsis;
    //                 display: -webkit-box;
    //                 -webkit-line-clamp: 2;
    //                 line-clamp: 2;
    //                 -webkit-box-orient: vertical;
    //             }
    //             >span{
    //                 display: inline-block;
    //                 width: 36px;
    //                 height: 15px;
    //                 border-radius: 4px;
    //                 text-align: center;
    //                 line-height: 15px;
    //                 margin-top: 5px;
    //             }

    //         }
    //         .goodsPrice{
    //             margin-top: 24px;
    //             font-size: 13px;
    //             color: #FF4C50;
    //             img{
    //                 width: 12px;
    //             }
    //         }
    //     }
    // }
}
.active2{
    margin-top: 20px;
    background: #f5f5f5;
    ul{
        display: flex;
        justify-content: space-between;
        background:#f5f5f5;
        padding: 0 4vw;
        margin-top: -60px;
    }
    li{
        width: 32%;
        background:#ffffff;
        border-radius: 5px;
        overflow: hidden;
        .goodsMsg{
            p{
                margin-left:13px;
                overflow: hidden;
                text-overflow : ellipsis;
                white-space: nowrap;

            }
        }
    }
}
.jingxuan{
    padding: 0 4vw;
    background: #ffffff;
    min-height: 92.2vh;
    h4{
        line-height:3em;
        font-size: 20px;
        font-weight: 100;
    }
}
.xianshixianliang{
    display: flex;
    justify-content: space-between;
    width: 92vw;
    margin: 0 auto;
    margin-top: 20px;
    a{
        width: 48%;
        display: inline-block;
        border-radius: 8px;
        overflow: hidden;
        img{
            width: 100%
        }
    }
}
.guessListName{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    -moz-box-orient:vertical;
    -moz-line-clamp:2;
    height: 42px;
    margin: 12px;
    font-size: 13px;
    color: #333333;
    margin-bottom: 0px;
}
.guessListPrice{
    margin:0 12px;
    line-height: 40px;
    span{
        color:#FF4C50;
        font-size: 12px;
    }
}
.guessList{
    display:flex;
    justify-content: space-between;
    width: 92vw;
    margin: 0 auto;
    margin-top: 20px;
    flex-wrap: wrap;
    li{
        width:44vw;
        border-radius: 8px;
        overflow: hidden;
        background :#f5f5f5;
        margin-bottom: 15px;

        .img{
            height: 44vw;
            vertical-align: middle;
            line-height: 44vw;
            overflow: hidden;
            background: #ffffff;
        }
        img{
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
    }
}
.main-search-wrap {
        width: 100%;
        background: rgb(207, 50, 109);
        position: relative;
        z-index:100;
        // opacity: .2;
        // height: 2.8125rem;
        .main-search {
            width: 92%;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            > input {
                width: 100%;
                // height: 2rem;
                color: #666;
                text-indent: 1em;
                background: #F5F5F5;
                border-radius: 1rem;
                border: none;
                outline: none;
            }
            > img {
                width: 1.375rem;
                // height: 1.375rem;
            }
        }
    }
.main-wrap {
    width: 100%;
    /*头部搜索*/

    /*功能*/
    .main-features-wrap {
        width: 100%;
        // height: 10.625rem;
        margin-top: .75rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        .main-features {
            width: 92vw;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            border-radius: 8px;
            overflow: hidden;
            ul {
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                padding-bottom: 10px;
                li {
                    width: 20%;
                    align-items: center;
                    text-align:center;
                    color:#333333;
                    margin-top: 10px;
                    a {
                        width: 100%;
                        height: 100%;
                        align-items: center;
                        img {
                            width: 2.6875rem;
                            // height: 2.6875rem;
                            margin: 0 auto;
                        }
                        span {
                            display: block;
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style lang="scss">
  .pageIndex{
  .van-popup{
    background: none;
    width:71vw;
    top: 44%;
  }
  }
</style>
